<template>
  <div class="editor-pane"
       @keyup.esc="handleKeyup">
    <div class="editor-pane-inner">
      <div class="editor-main"
           :style="{transform: 'scale('+scale+')', width: projectData.width + 'px', height: projectData.height + 'px'}">
        <div class="quark-element-wrapper"
             ref="canvas-panel"
             id="canvas-panel">
          <div :class="{active: item.uuid === activeElementUUID}"
               class="quark-element"
               v-for="item in activePage.elements"
               :key="item.uuid"
               :uuid="item.uuid"
               @click="handleElementClick(item.uuid)">
            <!--             <component :is="element.elName" class="quark-element" v-bind="element.propsValue"/>-->
            <qkAdvert v-if="item.elName=='qk-advert'"
                      class="element-on-edit-pane"
                      :prop="item.propsValue.prop"></qkAdvert>
            <qkImage v-if="item.elName=='qk-image'"
                     class="element-on-edit-pane"
                     :prop="item.propsValue.prop"></qkImage>
            <qkInput v-if="item.elName=='qk-input'"
                     class="element-on-edit-pane"
                     :prop="item.propsValue.prop"></qkInput>
            <qkGoods v-if="item.elName=='qk-goods'"
                     class="element-on-edit-pane"
                     :prop="item.propsValue.prop"></qkGoods>
            <qkStoreHeader v-if="item.elName=='qk-store-header'"
                           class="element-on-edit-pane"
                           :store="store"
                           :prop="item.propsValue.prop"></qkStoreHeader>
            <qkStoreGoods v-if="item.elName=='qk-store-goods'"
                          class="element-on-edit-pane"
                          :prop="item.propsValue.prop"></qkStoreGoods>
            <qkTabbar v-if="item.elName=='qk-tabbar'"
                      class="element-on-edit-pane"
                      :prop="item.propsValue.prop"></qkTabbar>
            <qkCarousel v-if="item.elName=='qk-carousel'"
                        class="element-on-edit-pane"
                        :prop="item.propsValue.prop">
            </qkCarousel>
            <qkStoreHotGoods v-if="item.elName=='qk-store-hot-goods'"
                             class="element-on-edit-pane"
                             :prop="item.propsValue.prop">
            </qkStoreHotGoods>
            <qkStoreActivity v-if="item.elName=='qk-store-activity'"
                             class="element-on-edit-pane"
                             :prop="item.propsValue.prop">
            </qkStoreActivity>
            <qkStoreBanner v-if="item.elName=='qk-store-banner'"
                             class="element-on-edit-pane"
                           :store="store"
                             :prop="item.propsValue.prop">
            </qkStoreBanner>
            <qkStoreSearch v-if="item.elName=='qk-store-search'"
                             class="element-on-edit-pane"
                             :prop="item.propsValue.prop">
            </qkStoreSearch>
          </div>
        </div>

        <div class="page-wrapper-menu-operation menu-item-on-edit-panel"
             :style="{transform: 'scale('+(1/scale)+')'}"
             :class="{active: activeElementUUID}">
          <el-tooltip v-for="(item, index) in menuOptions"
                      :key="index"
                      effect="dark"
                      :content="item.title"
                      placement="right">
            <div class="menu-item menu-item-on-edit-panel"
                 @click="handleElementCommand(item.value)">
              <i class="menu-item-on-edit-panel"
                 :class="[item.icon]"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="page-wrapper-mask"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { _qk_register_components_object } from '../../plugins/index'
import { mapState, mapGetters } from 'vuex'
import html2canvas from 'html2canvas';


export default {
  props: {
    // canvas画板缩放
    scale: {
      type: Number,
      default: 1
    },
    store: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    // 批量注册qk组件
    ..._qk_register_components_object,
  },
  data () {
    return {
      menuOptions: [{
        title: '删除',
        icon: 'iconfont icon-shanchu',
        value: 'delete'
      }, {
        title: '上移',
        icon: 'iconfont icon-xiangshang2',
        value: 'layerUp'
      }, {
        title: '下移',
        icon: 'iconfont icon-xiangxia2',
        value: 'layerDown'
      }]
    }
  },
  computed: {
    ...mapState({
      projectData: state => state.editor.projectData,
      activeElementUUID: state => state.editor.activeElementUUID
    }),
    ...mapGetters([
      'activePage',
    ])
  },
  mounted () {

  },
  methods: {
    /**
     * 元素被点击
     * @param uuid
     */
    handleElementClick (uuid) {
      this.$store.dispatch('setActiveElementUUID', uuid);
    },
    /**
     * 对元素进行操作命令
     */
    handleElementCommand (command) {
      this.$store.dispatch('elementCommand', command)
    },
    /**
     * 监听键盘事件
     * @param e
     */
    handleKeyup (e) {
      console.log(1111, e);
    },
    /**
     * 提供截屏作为项目主图
     */
    screenshots () {
      const el = document.querySelector('#canvas-panel')
      html2canvas(el, {
        width: 375,
        height: 667,
        proxy: '/htmltocanvas/corsproxy' // 设置跨域接口
      }).then(canvas => {
        let url = canvas.toDataURL("image/jpeg");
        this.$store.commit('updateCoverImage', url)
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .quark-element-wrapper {
    height: 100%;
    width: calc(100% + 6px);
    overflow-y: auto;
  }
.quark-element {
  cursor: move;
  border: 3px solid transparent;
  background: #fff;
  margin-bottom: 12px;
    &.active {
      border: 3px solid #F39800;
    }
    /*&:hover {*/
    /*  border: 3px dashed #F39800;*/
    /*}*/
}
.editor-pane {
  height: 100%;
  width: 100%;
  border: 1px solid #f5f5f5;
  border-width: 0 1px;
  background-image: linear-gradient(
      45deg,
      #f5f5f5 25%,
      transparent 0,
      transparent 75%,
      #f5f5f5 0
    ),
    linear-gradient(
      45deg,
      #f5f5f5 25%,
      transparent 0,
      transparent 75%,
      #f5f5f5 0
    );
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
  display: flex;
  justify-content: center;
}

.editor-pane-inner {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding: 20px;
}

.editor-main {
  border-radius: 3px;
  box-shadow: 0 3px 10px #dcdcdc;
  margin: 25px auto;
  position: relative;
  background: #f5f6f7;
  transform-origin: center top;
  background-image: url("");
}

.page-preview-wrapper {
  height: 100%;
  position: relative;
}

.page-wrapper-mask {
  height: 100%;
  width: 100%;
  z-index: 1000;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  outline: rgba(236, 238, 240, 0.77) solid 10000px;
}

.element-on-edit-pane {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-bottom: 10px;
}

.page-wrapper-menu-operation {
  position: absolute;
  right: -80px;
  top: 5%;
  width: 0;
  background: white;
  color: #333;
  text-align: center;
  z-index: 1002;
  border-radius: 4px;
  display: none;
  transition: all 0.28s;
  opacity: 0;
  transform-origin: center top;
  .menu-item {
    padding: 10px;
    cursor: pointer;
    &.i {
      font-size: 24px;
      line-height: 30px;
    }
    &:hover {
      background: rgba(37, 165, 137, 0.09);
      color: $primary;
      &.i {
        font-weight: bold;
        font-size: 26px;
      }
    }
  }
  &.active {
    display: block;
    width: 60px;
    opacity: 1;
  }
}
</style>
